<template>
  <h2>组合式API:props</h2>
  <div>
    <div>
      <h3 @click="editTitle">{{ tle }}</h3>
      <p>props.des:{{ des }}</p>
      <p>props.user.name:{{ user.name }}</p>
      <p>props.user.sex:{{ user.sex }}</p>
    </div>
    <div v-show="isShow" class="isShowHide">显示或隐藏</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  des: {
    type: String,
    default: 'des默认值'
  },
  propH: {
    type: Function,
    default() {
      console.log('子组件props函数被调用')
      return '这是一个默认方法'
    }
  },
  user: {
    type: Object,
    default(rawProps: any) {
      console.log(rawProps, 'rap')
      return {
        name: '张三',
        sex: 1
      }
    }
  }
})
const tle = ref(props.title)
const isShow = ref(false)
const sonTitle = ref('sd2Demo的sonTitle')

const editTitle = () => {
  tle.value = '可以修改被props的值初始化后的状态变量'

  // 调用子组件传过来的函数
  props.propH(sonTitle.value, showHandler)
}
const showHandler = () => {
  isShow.value = !isShow.value
}
</script>

<style lang="scss" scoped>
.isShowHide {
  height: 100px;
  width: 100px;
  background-color: cyan;
}
</style>
